<template>
	<view class="page-container">
		<editor
			id="myEditor"
			class="content-editor"
			placeholder="请输入内容..."
			@ready="onEditorReady"
			@input="onEditorInput"
		></editor>

		<view class="button-wrapper">
			<view class="topic-button" @click="showPresetTopics"># 话题</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editorCtx: null,
				presetTopics: ['AAAA', 'BBBB', 'CCCC', 'DDDD']
			}
		},
		methods: {
			//编辑器初始化完成时触发
			onEditorReady() {
				uni.createSelectorQuery().select('#myEditor').context((res) => {
					this.editorCtx = res.context;
				}).exec();
			},
			
			onEditorInput(event) {
				console.log(event);
			},

			//点击话题
			showPresetTopics() {
				if (!this.editorCtx) {
					uni.showToast({ title: '编辑器未准备好', icon: 'none' });
					return;
				}
				
				uni.showActionSheet({
					itemList: this.presetTopics,
					success: (res) => {
						const selectedTopic = this.presetTopics[res.tapIndex];
						
						//设置后续插入的文本颜色为蓝色
						this.editorCtx.format('color', '#007AFF');
						//插入话题文本（注意，话题本身不带空格）
						this.editorCtx.insertText({
							text: `#${selectedTopic}`
						});
						//立刻将颜色改回默认的黑色
						this.editorCtx.format('color', '#000000');
						//插入一个空格，这个空格是黑色的，确保用户接下来的输入是黑色
						this.editorCtx.insertText({
							text: ' ' 
						});
					},
					fail: () => {
						console.log('用户取消选择');
					}
				});
			}
		}
	}
</script>

<style>
	.page-container {
		padding: 40rpx;
		background-color: #FFFFFF;
		height: 100vh;
		box-sizing: border-box;
	}

	/* editor 组件样式 */
	.content-editor {
		width: 100%;
		min-height: 400rpx;
		height: auto;
		border: 1rpx solid #E0E0E0;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 1.6;
	}
	
	.content-editor .ql-blank::before{
	   font-style: normal;
	   color: #999;
	}

	.button-wrapper {
		margin-top: 30rpx;
	}

	.topic-button {
		display: inline-block;
		background-color: #f0f0f0;
		color: #333;
		padding: 10rpx 24rpx;
		border-radius: 40rpx;
		font-size: 26rpx;
	}
</style>